<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网络分析</title>
    <link rel="stylesheet" href="../js/lib/ol4.6.4/ol.css" type="text/css">
    <style>
        #map {
            width: 1920px;
            height: 1000px;
        }
        h3 {
            position: absolute;
            left: 50%;
            top: 0;
        }
        #but {
            position: absolute;
            left: 100px;
            top: 20px;
            width: 80px;
            height: 40px;
        }
    </style>
    <script src="../js/lib/ol4.6.4/ol.js"></script>
</head>
<body>
    <div id="map"></div>
    <h3>请在地图上点击起点和终点 <a href="https://zhuanlan.zhihu.com/p/82225790">参考链接</a></h3>
    <button id="but" onclick="clickPgr()">导航</button>
</body>
</html>
<script>

    let roadLayer = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: 'http://localhost:28085/geoserver/wms',
            params: { 'LAYERS': 'webgistest:shenzhen_roads', 'TILED': true },
            serverType: 'geoserver'
        })
    })
    let map = new ol.Map({
        target: document.getElementById("map"),
        layers: [
            roadLayer
        ],
        view: new ol.View({
            center: [12702592.2, 2590070.3],
            projection: 'EPSG:3857',
            zoom: 12
        })
    });
    let coord = [[12677354.9,2578172.3],[12677441.2, 2577908.3]];
    let wfs = null;
    function wfsLayer(coord) {
        map.removeLayer(wfs);
        wfs = new ol.layer.Vector({
            title: 'add Layer',
            source: new ol.source.Vector({
                format: new ol.format.GeoJSON(),
                url: function (extent) {
                    return (
                        'http://localhost:28085/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&typeName=webgistest:pgr_shenzhen_roads&'
                        + 'viewparams=x1:' + coord[0][0] + ';y1:' + coord[0][1] + ';x2:' + coord[1][0] + ';y2:' + coord[1][1] + '&'
                        + 'outputFormat=application/json&srsname=EPSG:3857&bbox=' +
                        extent.join(',') + ',EPSG:3857');
                },
                strategy: ol.loadingstrategy.bbox
            }),
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'rgb(255,111,0)',
                    width: 4
                })
            })
        });
        return wfs;
    }
    function clickPgr() {
        console.log(coord);
        map.addLayer(wfsLayer(coord));
    }
    let iconLayer=[null,null];
    let number = 1;
    function addIcon(coord,url) {
        //矢量标注的数据源
        let vectorSource = new ol.source.Vector({
            features: [new ol.Feature({geometry: new ol.geom.Point(coord)})]
        });
        //矢量标注图层
        icon = new ol.layer.Vector({
            source: vectorSource,
            style: new ol.style.Style({
                image: new ol.style.Icon({
                    src: url //图标的url
                })
            })
        });
        console.log(number % 3)
        switch (number % 3) {
            case 1:
                iconLayer[0] = icon;
                map.addLayer(icon);
                break;
            case 2:
                iconLayer[1] = icon;
                map.addLayer(icon);
                break;
            case 0:
                map.removeLayer(iconLayer[0]);
                map.removeLayer(iconLayer[1]);
                break;
        }
    }
    map.on('singleclick', function(e){
        switch (number % 3) {
            case 1:
                coord[0]=e.coordinate;
                addIcon(e.coordinate,'https://gitee.com/dxwangnima/images/raw/master/img/%E8%B5%B7%E7%82%B964.png');
                break;
            case 2:
                coord[1]=e.coordinate;
                addIcon(e.coordinate,'https://gitee.com/dxwangnima/images/raw/master/img/%E7%BB%88%E7%82%B964.png');
                break;
            case 0:
                addIcon(e.coordinate,'https://gitee.com/dxwangnima/images/raw/master/img/%E8%B5%B7%E7%82%B964.png');
                map.removeLayer(wfs);
                break;
        }
        number ++;
    });

</script>
